<template>
  <view class="container">
    <!-- 用户头像与状态 -->
    <view class="userProfile" v-if="userInfo">
      <view class="userInfo">
        <image class="avatar" :src="proxy.$tool.getResources(userInfo.avatar)"></image>
        <text class="name">{{ userInfo.name }}</text>
      </view>
      <view class="edit-button" @click="goInfo()">
        修改个人资料
      </view>
    </view>
    <view v-else class="login-button">
      <span v-if="!loginBtnLoading" @click="auth()">点击登录</span>
      <up-loading-icon  v-else textColor="#007aff" text="点击登录"></up-loading-icon>
    </view>
    <!-- 功能模块 -->
    <view class="features">
      <up-row gutter="10" customStyle="margin-bottom: 30px">
        <up-col span="6" class="feature-item">
          <up-text align="center" :size="20" text="功能介绍" @click="()=>{proxy.$tool.skipRoute('/pageMy/instructions')}" ></up-text>
        </up-col>
        <up-col span="6" class="feature-item">
          <up-text align="center" :size="20" text="项目合作" @click="()=>{contactMePopupRef.open()}"></up-text>
        </up-col>
      </up-row>

      <up-row gutter="10">
        <up-col span="6" class="feature-item">
          <up-text open-type="share" :size="20" text="邀请好友"></up-text>
        </up-col>
        <up-col span="6" class="feature-item">
          <up-text align="center" @click="()=>{clearModal.show=true}" :size="20" text="清理缓存"></up-text>
        </up-col>
      </up-row>
    </view>


    <view class=""></view>

    <up-modal
        :show="clearModal.show"
        :title="clearModal.title"
        :showCancelButton="true"
        @confirm="clearCache"
        @cancel="()=>{clearModal.show=false}">
      <view class="slot-content">
        <rich-text :nodes="clearModal.content"></rich-text>
      </view>
    </up-modal>


    <!-- 技术支持 -->
    <view class="footer">
      <text class="support">技术支持：是佳伦不是桂伦</text>
    </view>
  </view>

  <contactMePopup ref="contactMePopupRef"></contactMePopup>
</template>

<script setup>
import {
  computed,
  getCurrentInstance,
  ref
} from "vue";
import {
  useStore
} from "vuex";
import contactMePopup from "@/components/contactMePopup";
const {
  proxy
} = getCurrentInstance();
const store = useStore();
const userInfo = computed(() => store.state.userInfo);
//修改个人信息
const goInfo = function () {
  uni.navigateTo({
    url: '/pageMy/userInfoForm'
  })
}

//登录按钮loding防止多次请求
const  loginBtnLoading = ref(false);

/**
 * 认证
 */
const auth = function () {
  loginBtnLoading.value=true;
  proxy.$tool.login(() => {
    loginBtnLoading.value=false;
  },()=>{
    loginBtnLoading.value=false;
  })
}

/**
 * 定义清理缓存弹窗
 */
const clearModal = ref({
  title: '清除缓存',
  content: '清除缓存后需要重新登录认证，是否继续？',
  show: false
})

/**
 * 清理缓存
 */
const clearCache = function () {
  proxy.$tool.logout();
  clearModal.value.show = false;
}

//定义联系我弹出ref
const contactMePopupRef = ref(null)

</script>
<style lang="less" scoped>
/* 页面整体布局 */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(to bottom, #5a61ff, #ffffff);
  min-height: 100vh;
}

/* 头部部分：头像与状态 */
.userProfile {
  width: 90%;
  margin-top: 30px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #f0f0f0;

  .userInfo {
    display: flex;
    align-items: center;
  }

  .avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    margin-right: 12px;
  }

  .username {
    font-size: 16px;
    color: #333;
  }

  .edit-button {
    padding: 6px 12px;
    font-size: 14px;
    color: #007aff;
    border: 1px solid #007aff;
    border-radius: 4px;
    background-color: #fff;
    text-align: center;
  }
}

.login-button {
  margin-bottom: 30px;
  margin-top: 10px;
  padding: 6px 12px;
  font-size: 14px;
  color: #007aff;
  border: 1px solid #007aff;
  border-radius: 4px;
  background-color: #fff;
  text-align: center;
}
/* 功能模块 */
.features {
  width: 90%;
  margin-top: 70px;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px;

  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px 0;
    font-size: 14px;
    text-align: center;
  }

  :deep(.u-text) {
    padding: 20px;
    box-sizing: border-box;
    background: #f7f7f7;
    border-radius: 5px;
  }


  .label {
    margin-top: 5px;
    font-size: 14px;
    color: #333;
  }
}


/* 页脚部分：技术支持 */
.footer {
  margin-top: auto;
  padding: 20px 0;
  .support {
    font-size: 14px;
    color: #999;
  }
}


</style>